@import "@dataspherestudio/shared/common/style/variables.scss";

.newHome_page {
  // background-color: #f4f7fb;
  // background: #f4f7fb;
  @include bg-color($workflow-body-bg-color, $dark-workflow-body-bg-color);
  height: 100%;
  @include font-color($workspace-title-color, $dark-workspace-title-color);
  padding: 25px;
  display: flex;
  flex-direction: column;

  .newHome_header {
    flex: none;
    .newHome_info {
      h1 {
        font-size: 21px;
      }
      p {
        font-size: $font-size-base;
        margin: 12px 0 24px;
        // color: rgba(0, 0, 0, 0.5);
        @include font-color($light-text-desc-color, $dark-text-desc-color);
      }
    }
  }

  .newHome_main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-width: 900px;
    height: 700px;
    padding-bottom: 20px;
    .newHome_main_left {
      flex: 1;
      height: 100%;
      max-height: 100%;
      overflow-y: auto;
      padding: 25px;
      box-sizing: border-box;
      border: 1px solid #dee4ec;
      border-radius: 2px;
      min-width: 640px;

      // background: #f4f7fb;
      // background: #ffffff;
      @include bg-color($workspace-body-bg-color, $dark-workspace-body-bg-color);
      @include border-color($border-color-base, $dark-border-color-base);
      .newHome_title_search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        .left_header {
          flex: none;
          font-size: $font-size-large;
          // color: $text-title-color;
          @include font-color($workspace-title-color, $dark-workspace-title-color);
          padding-left: 10px;
          line-height: 1;
          border-left: 3px solid $primary-color;
          @include border-color($primary-color, $dark-primary-color);
        }
        .left_search {
          flex: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .header-search {
            flex: 50%;
            ::v-deep.ivu-input {
              @include bg-color($workspace-body-bg-color, $dark-workspace-body-bg-color);
              @include border-color($border-color-base, $dark-border-color-base);
            }

          }
        }

        .left_visual {
          margin-right: 15px;
          font-size: 14px;
          // color: $text-desc-color;
          @include font-color($light-text-color, $dark-text-color);
          cursor: pointer;
          ::v-deep.visualCatesIcon {
            @include font-color($light-text-color, $dark-text-color);
          }
        }
      }
      .newHome_list {
        .card-content {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .newHome_create {
          cursor: pointer;
          min-width: 320px;
          height: 116px;
          margin-bottom: 25px;
          box-sizing: border-box;
          border: 1px dashed #d9d9d9;
          @include border-color($border-color-base, $dark-border-color-base);
          @include bg-color($workflow-body-bg-color, $dark-workflow-body-bg-color);
          border-radius: 2px;
          padding: 10px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 25px;
          &:hover {
            box-shadow: 0 2px 12px 0 $shadow-color;
            border-radius: $border-radius-small;
          }
          .newHome_create_content {
            flex: none;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            .newHome_create_text {
              margin-left: 10px;
              cursor: pointer;

              font-size: $font-size-large;
            }
          }
        }
        .newHome_list_item {
          cursor: pointer;
          width: 320px;
          height: 116px;
          margin-bottom: 25px;
          box-sizing: border-box;
          border: 1px solid #dee4ec;
          @include border-color($border-color-base, $dark-border-color-base);
          border-radius: 2px;
          padding: 25px;
          position: relative;
          background: url("../../assets/images/bgc-imag.svg") center right
            no-repeat;
          background-size: contain;
          margin-right: 25px;

          :last-child {
            margin-right: 0;
          }
          &:hover {
            box-shadow: 0 2px 12px 0 $shadow-color;
            border-radius: $border-radius-small;
          }
          .management-button {
            position: absolute;
            top: 5px;
            right: 10px;
          }
          .item-header {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .name {
              flex: 1;
              max-width: 172px;
              white-space: nowrap;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;

              font-size: 18px;
              color: $text-title-color;
              @include font-color($workspace-title-color, $dark-workspace-title-color);
              line-height: 24px;
              margin-top: 5px;
            }
          }

          .desc {
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;

            font-size: 14px;
            // color: rgba(0, 0, 0, 0.45);
            @include font-color($light-text-desc-color, $dark-text-desc-color);
            line-height: 22px;
            margin-top: 8px;
          }

          .lable-list {
            position: absolute;
            left: 10px;
            bottom: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            .item {
              display: inline-block;
              font-size: 10px;
              padding: 0.3em 0.9em;
              margin: 0 0.5em 0.5em 0;
              white-space: nowrap;
              // background-color: #f1f8ff;
              @include bg-color($workspace-background, $dark-workspace-background);
              border-radius: $border-radius-small;
              // color: $primary-color;
              @include font-color($primary-color, $dark-primary-color);
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 31%;
            }
          }

          .editor {
            position: absolute;
            right: 10px;
            bottom: 10px;
          }
        }
        .page {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .newHome_main_right {
      flex: 0;
      margin-left: 25px;
      height: 100%;
      min-width: 250px;
      max-height: 100%;
      overflow-y: auto;
      padding: 25px;
      box-sizing: border-box;
      border: 1px solid #dee4ec;
      border-radius: 2px;
      // background: #ffffff;
      @include bg-color($workspace-body-bg-color, $dark-workspace-body-bg-color);
      @include border-color($border-color-base, $dark-border-color-base);
      .right_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .permissions_wrap {
        display: flex;
        justify-content: flex-start;
        .permissions_entry {
          cursor: pointer;
          text-align: center;
          padding: 10px 0;
          & img {
            width: 80px;
          }
          & div {
            margin-top: 5px;
          }
        }
      }

      .title {
        font-size: $font-size-large;
        // color: rgba(0, 0, 0, 0.85);
        @include font-color($workspace-title-color, $dark-workspace-title-color);
        padding-left: 10px;
        line-height: 1;
        border-left: 3px solid $primary-color;
        @include border-color($primary-color, $dark-primary-color);
      }
    }
  }
}
